<template>
  <div class="box4" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './China.json'

//获取图表DOM实例
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)

onMounted(() => {
  //初始化echarts实例
  let myMap = echarts.init(map.value)
  //设置配置项
  myMap.setOption({
    geo: {
      map: 'china',
      roam: true, //鼠标缩放效果
      //地图上文字的设置
      label: {
        show: true,
        color: '#fff',
        fontSize: 14,
      },
      //每一个多边形的样式
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#051937' }, // 深蓝色（沉浸感）
            { offset: 1, color: '#00C9FF' }, // 霓虹青色
          ],
          global: false, // 局部渐变
        },
        opacity: 0.8,
      },
      //地图高亮
      emphasis: {
        label: {
          show: true,
          color: '#fff',
          fontSize: 28,
        },
        itemStyle: {
          color: 'pink',
        },
      },
    },
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'lines', // 航线系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 北京
              [114.057868, 22.543099], // 深圳
            ],
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: '#00E5FF' }, // 霓虹蓝
                  { offset: 1, color: '#C471ED' }, // 亮紫色
                ],
              },
              width: 3,
              curveness: 0.2, // **减少弧度**
              opacity: 0.8,
            },
          },
          {
            coords: [
              [87.617733, 43.792818], // 乌鲁木齐
              [121.472644, 31.231706], // 上海
            ],
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: '#FF6B6B' }, // 红色霓虹
                  { offset: 1, color: '#FFD93D' }, // 金黄色
                ],
              },
              width: 3,
              curveness: 0.2, // **减少弧度**
              opacity: 0.9,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M1705 572q0-44-34-70l-682-498q-34-24-76-24t-76 24l-682 498q-34 26-34 70 0 44 34 70l682 498q34 24 76 24t76-24l682-498q34-26 34-70z', // **飞机图标**
          color: '#FFD700', // **金色飞机**
          symbolSize: 15, // 飞机大小
          trailLength: 0.15, // 轨迹长度
          constantSpeed: 60, // **稍微加快速度**
        },
      },
    ],
  })
})
</script>

<style scoped></style>
